<template>
  <div id="app">
    <div
      class="outFull"
      v-if="$router.history.current.name !== 'login'"
      @click="outFll"
    >
      <img
        alt=""
        class="pr-8"
        src="@/assets/images/close.svg"
        style="width: 20px; height: 20px"
      />

      <span>退出全屏</span>
    </div>
    <router-view v-if="isShow"></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  provide() {
    return {
      reload: this.pageReload,
    };
  },
  data() {
    return {
      isShow: true,
      fullscreen: false,
    };
  },
  methods: {
    outFll() {
      //W3C
      // let fullscreen = sessionStorage.getItem("fullscreen");
      if (document.fullscreenElement) {
        document.exitFullscreen();
      }
      // console.log("this.fullscreen", fullscreen);
      // if (fullscreen) {
      //   // document.documentElement.exitFullscreen();
      //   sessionStorage.setItem("fullscreen", false);
      // }
    },
    pageReload() {
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true;
      });
    },
  },
};
</script>

<style lang="scss">
@import "./assets/css/reset.css";
@import "./assets/css/iconfont.css";
@import "./assets/css/element.css";
@import "./assets/css/global.scss";
.outFull {
  position: absolute;
  bottom: 18px;
  // left: 160px;
  left: 16px;
  display: flex;
  align-items: center;
  // width: 140px;
  padding: 0px 10px;
  padding-right: 20px;
  height: 32px;
  background: rgb(241, 245, 245);
  // border: 1px solid #00bfb1;
  // border-radius: 4px;
  color: #00bfb1;
  z-index: 10;
  cursor: pointer;
  // height: 40px;
  // line-height: 40px;
  img {
    width: 12px;
    height: 12px;
  }
  span {
    // height: 40px;
    display: inline-block;
    position: relative;
    // top: 1px;
    // text-decoration: underline;
  }
}
</style>
